import React from "react";
import { Calendar, Card } from "antd";
import { Lunar } from "lunar-javascript";

function dateCellRender(value) {
  const date = value.toDate();
  const lunar = Lunar.fromDate(date);
  const lunarDay = lunar.getDayInChinese();
  const festival = lunar.getFestivals().join(" ") || lunar.getJieQi() || "";
  return (
    <div style={{ textAlign: "center" }}>
      <div style={{ fontSize: 12, color: "#888" }}>{lunarDay}</div>
      {festival && <div style={{ fontSize: 10, color: "#d46b08" }}>{festival}</div>}
    </div>
  );
}

export default function Page6() {
  return (
    <div>
      <h2>农历日历</h2>
      <Card>
        <Calendar dateCellRender={dateCellRender} />
      </Card>
    </div>
  );
}